<template>
  <div id="home">
    <!-- 首页背景 -->
    <div class="bg" :style="{'background-image': `url(${Homeimgurl})`}">
      <!-- 背景内容 -->
      <div class="center">
        <h1>武汉源码时代2022新发展</h1>
        <div>
          汇聚科技精华，缔造百年万达。在30多年的发展中，万达集团励精图治，开拓进取，……
        </div>
      </div>
      <!-- 背景下方箭头 -->
      <div class="foot">
        <div class="f-center"></div>
        <div class="f-foot">最新动态</div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="tp">
      <!-- 开班 -->
      <div class="tp-center">
        <div class="tp-t-l">
          <div
            class="tp-t-l-bg"
            :style="{'background-image': `url(${newsDynamicImg})`}"
          ></div>
          <div class="time">2021.01.11</div>
          <h2>{{ newsDynamicTitle }}</h2>
          <p>{{ newsDynamicInfo }}</p>
        </div>
        <!-- 新员工信息 -->
        <div class="tp-t-r">
          <div class="tp-t-r-t">
            <!-- <img :src="newListImg" alt="" /> -->
            <div class="block">
              <el-carousel>
                <el-carousel-item v-for="item in 2" :key="item">
                  <!-- <h3 class="small">{{ item }}</h3> -->
                  <img :src="newListImg" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="tp-t-r-c">2021.01.10</div>
            <div class="tp-t-r-f">
              <h2>{{ newsListTitle }}</h2>
              <!-- <ul>
                <li v-for="item in list" :key="item.id">{{ item.title }}</li>
              </ul> -->
              <vue-seamless-scroll
                :data="list"
                :class-option="optionHover"
                class="seamless-warp"
              >
                <ul class="item">
                  <li v-for="item in list">
                    <span class="title" v-text="item.title"></span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
      <!-- 企业文化&公司简介 -->
      <div class="tp-f-list">
        <div class="tp-f-l" v-for="item in synopsis" :key="item.id">
          <img :src="item.imgurl" alt="" />

          <router-link :to="item.path">{{ item.value }}</router-link>
        </div>
        <!-- <div class="tp-f-r"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import mock from "../mock";

export default {
  data() {
    return {
      Homeimgurl: "",
      synopsis: [],
      list: [],
      newsListTitle: "",
      homeTitle: "",
      homeInfo: "",
      newListImg: "",
      newsDynamicTitle: "",
      newsDynamicInfo: "",
      newsDynamicImg: "",
    };
  },
  created() {},
  mounted() {
    //请求新闻列表的数据
    this.getNewsData();
    this.getHomeBg();
    this.getNewsDynamic();
    this.getSynopsis();
  },
  computed: {
    optionHover() {
      return {
        hoverStop: true, //鼠标悬停关闭
        singleWidth: 0, // 单行停顿的宽度(默认值0是无缝不停止的滚动)
        singleHeight: 1, //单行停顿间距(不需要停顿不设置)
        waitTime: 15, //单行停顿时间(不需要停顿不设置)
        step: 0.5, //向上滚动不停顿
        limitMoveNum: 1, // 开始无缝滚动的数据量
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
      };
    },
  },
  methods: {
    // 首页新闻列表数据
    getNewsData() {
      mock.getNewsData().then((res) => {
        if (res.status === 1) {
          let data = res.data;
          // 详情
          this.list = data.list;
          // 标题
          this.newsListTitle = data.title;
          this.newListImg = data.img;
        }
      });
    },
    // 主页背景
    getHomeBg() {
      mock.getHomeBg().then((res) => {
        if (res.status === 1) {
          let data = res.data;
          // 标题
          this.homeTitle = data.list;
          // 标题
          this.newsListTitle = data.title;
          this.Homeimgurl = data.bg;
        }
      });
    },
    // 最新动态
    getNewsDynamic() {
      mock.getNewsDynamic().then((res) => {
        if (res.status === 1) {
          let data = res.data;
          this.newsDynamicTitle = data.title;
          this.newsDynamicInfo = data.info;
          this.newsDynamicImg = data.img;
        }
      });
    },
    // 公司简介
    getSynopsis() {
      mock.getSynopsis().then((res) => {
        if (res.status === 1) {
          let data = res.data;
          console.log(data);
          this.synopsis = data.list;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-carousel__item img {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  width: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

#home {
  color: #fff;
  .bg {
    width: 100%;
    height: 470px;
    background: aqua;
    position: relative;
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    // img {
    //   width: 100%;
    //   height: 720px;
    // }
    .center {
      width: 973px;
      height: 199px;
      position: absolute;
      left: 130px;
      top: 170px;
      div {
        width: 973px;
        height: 73px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        opacity: 1;
      }
      h1 {
        width: 959px;
        height: 85px;
        font-size: 60px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 0px;
        color: #ffffff;
        opacity: 1;
      }
    }
    .foot {
      width: 1663px;
      height: 208px;
      position: absolute;
      bottom: 0px;
      left: 130px;
      .f-top {
        height: 14px;
        display: flex;
        justify-content: space-between;
        // background: beige;
        span {
          display: inline-block;
        }
        .sp-left1 {
          width: 73px;
          height: 20px;
          margin-right: 40px;
          background-image: url("../assets/images/首页_slices/箭头左.png");
        }
        .sp-right1 {
          width: 73px;
          height: 20px;
          background-image: url("../assets/images/首页_slices/箭头右.png");
        }
        .sp-left2 {
          width: 14px;
          height: 14px;
          margin-right: 14px;
          background: #ffffff;
        }
        .sp-right2 {
          width: 42px;
          height: 14px;
          background: #2e86ff;
        }
      }
      .f-center {
        height: 0px;
        margin-top: 54px;
        border: 2px solid #ffffff;
      }
      .f-foot {
        margin-top: 35px;
        width: 168px;
        height: 42px;
        font-size: 42px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
  .tp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    position: relative;
    left: 0px;
    top: -35px;
    margin: 0 auto;
    .tp-center {
      display: flex;
      justify-content: space-between;
      width: 1712px;
      .tp-t-l {
        flex: 3;
        padding: 10px;
        .tp-t-l-bg {
          width: 100%;
          height: 300px;
          background-repeat: no-repeat;
          background-size: 100%;
        }
        .time {
          width: 185px;
          height: 43px;
          margin-top: 39px;
          border: 2px solid #2e86ff;
          text-align: center;
          line-height: 43px;
          font-size: 20px;
          border-left: none;
        }
      }
      .tp-t-r {
        flex: 2;
      }
    }
    .tp-f-list {
      display: flex;
      justify-content: space-between;
      width: 100%;
      & > div:last-child {
        margin-left: 5%;
      }
    }
    .tp-t-l {
      flex: 3;
      width: 1000px;
      height: 590px;
      background: #ffffff;
      box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.16);
      color: #000;
      margin-right: 5%;

      img {
        width: 1020px;
        height: 480px;
        background-color: bisque;
      }
      h2 {
        margin-top: 43px;
        width: 773px;
        height: 34px;
        font-size: 33px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
      }
      p {
        margin-top: 43px;
        width: 374px;
        height: 22px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
      }
    }
    .tp-t-r {
      height: 615px;
      background-color: #2e86ff;
      .tp-t-r-t {
        height: 100%;
      }
      .tp-t-r-t > img {
        background-color: bisque;
        width: 100%;
        height: 310px;
        position: relative;
        div {
          position: absolute;
          bottom: 16px;
          right: 24px;
          span {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 14px;
            background-color: #fff;
            &:nth-child(1) {
              width: 42px;
              background-color: #2e86ff;
            }
          }
        }
      }
      .tp-t-r-c {
        width: 185px;
        height: 43px;
        margin-top: 39px;
        border: 2px solid #fff;
        text-align: center;
        line-height: 43px;
        font-size: 20px;
        border-left: none;
      }
      .tp-t-r-f {
        margin: 26px 52px 52px 42px;
        h2 {
          padding-top: 10px;
          height: 34px;
          font-size: 34px;
          font-family: Source Han Sans CN;
          font-weight: 500;
        }
        .seamless-warp{
          margin-top: 35px;
           overflow: hidden;
           height: 84px;
        }
        ul {
          // margin-top: 35px;
          width: 520px;
          // height: 84px;
          line-height: 40px;
          // overflow: auto;
        }
      }
    }

    .tp-f-l {
      margin-top: 81px;
      //   margin-right: 64px;
      flex: 1;
      height: 390px;
      background: #170706;
      opacity: 0.6;
      position: relative;
      img {
        width: 100%;
        height: 390px;
      }
      a {
        display: inline-block;
        text-decoration: none;
        width: 240px;
        height: 60px;
        font-size: 60px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        opacity: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
